/*
 * @Description: 编辑元数据别名弹窗组件
 * @Author: Rfan
 * @Date: 2022-01-07 14:54:11
 * @LastEditTime: 2022-08-09 19:53:27
 */

import { useEffect } from 'react';
import { Button, Form, Modal } from 'antd';
import { jsonClone } from '@/utils';
import AliasForm from './AliasForm';
import type { FC } from 'react';
import type { ICommonDialog } from '@/interfaces/global';
import type { IAliasItem } from '@/interfaces/metadata';

interface IEditDialogProps extends ICommonDialog {
  data: IAliasItem;
}

const EditDialog: FC<IEditDialogProps> = (props) => {
  const { visible, data, onClose } = props;
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      const _data = jsonClone(data);
      _data.cname = _data.cName;
      _data.languageList = data.languageList.filter((item) => item.language !== '中文');
      form.setFieldsValue(_data);
    }
  }, [visible]);

  // 提交表单
  const submitFunc = () => {
    form.submit();
  };

  /**
   * @description: 关闭弹窗方法
   */
  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      destroyOnClose
      title="查看元数据别名"
      visible={visible}
      onCancel={onCancel}
      footer={[
        <Button key="confirm" type="primary" onClick={onCancel}>
          关闭
        </Button>
      ]}
    >
      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} preserve={false} form={form}>
        <AliasForm check />
      </Form>
    </Modal>
  );
};

export default EditDialog;
